<script setup lang="ts">
import { defineProps } from 'vue';
import { screenData } from '@/store/modules/screenData';

const screenDataList = screenData();

const props = defineProps({
  position: {
    type: Array,
    default: () => ([-200, -200]),
  },
  removeChartIndex: {
    type: Number,
    default: -1,
  },
});

function removeChart() {
  ElMessageBox.confirm(
    '确定删除该图表吗？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      screenDataList.componentList.find((f) => f.id === props.removeChartIndex).x = 5000;
      screenDataList.undateRemoveLayerList(props.removeChartIndex);
      // screenDataList.undateAddRemoveIdList(props.removeChartIndex);
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      });
    });
}
</script>

<template>
  <div
    class="container"
    :style="{
      left: position[0] + 'px',
      top: position[1] + 'px',
    }"
  >
    <div class="item">置顶</div>
    <div class="item">置低</div>
    <div class="item">上移一层</div>
    <div class="item">下移一层</div>
    <div class="item">成组</div>
    <div class="item">取消成组</div>
    <div class="item">锁定</div>
    <div class="item">隐藏</div>
    <div class="item">重命名</div>
    <div
      class="item"
      @click="removeChart"
    >
      删除
    </div>
  </div>
</template>
<style scoped lang="scss">
.container {
  position: absolute;
  width: 170px;
  box-sizing: border-box;
  font-size: 12px;
  background-color: rgb(43, 50, 59);
  z-index: 8999999999999999;
  .item {
    padding: 3px 36px 3px 6px;
    color: #e9e9e9;
    cursor: pointer;
    &:hover {
      background-color: rgb(53, 60, 69);
    }
    &:nth-child(5) {
      border-top: 1px solid #aaa;
    }
    &:nth-child(6) {
      border-bottom: 1px solid #aaa;
    }
    &:nth-child(8) {
      border-bottom: 1px solid #aaa;
    }
  }
}
</style>
